<script setup>
import { ref, onMounted,nextTick } from "vue";
import { Swiper,SwiperSlide } from 'swiper/vue'
import { getRecommendPlaylist } from '../../../api/songList'
import { Pagination } from "swiper/modules"
import SongCard from '../../../components/songCard.vue'

const list = ref([])
const slideIndex = ref(0)
const modules = [Pagination]

const playList = () => {
  getRecommendPlaylist(30).then(res => {
    list.value = res.result
    // 动态计算swiper 每页多少个
    nextTick(() => {
      const swiperWid = document.querySelector('.swiper-box').clientWidth
      slideIndex.value = Math.round(swiperWid / 180)
      // 监听尺寸变化
      window.addEventListener('resize', () => {
        const swiperWid = document.querySelector('.swiper-box').clientWidth
        slideIndex.value = Math.round(swiperWid / 180)
      })
    })
  })
}

onMounted(() => {
  playList()
})
</script>

<template>
  <div class="albums-box">
    <swiper class="swiper-box" :loop="true" :slides-per-view="slideIndex" :updateOnWindowResize="true" :space-between="24">
      <swiper-slide class="swiper-item" v-for="item in list" :key="item.id">
        <song-card :item="item" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<style scoped lang="scss">
.albums-box {
  width: 100%;
  margin: 24px 0;
  position: relative;
}
.swiper-item {
  width: 180px !important;
}
</style>
